<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格下拉框</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <div style="padding: 0 0 15px 0">
    <span>选择标识</span>
    <select class="easyui-combogrid" style="width: 250px"
      data-options="panelWidth: 450, value: '选择一个标识', idField: 'identifier', textField: '标识',
        url: '${pageContext.request.contextPath}/view/datagrid-and-tree/data.json', columns: [[
        { field: 'identifier', title: '标识', width: 50 },
        { field: 'userName', title: '用户名', width: 148 },
        { field: 'email', title: '邮件地址', width: 148 },
        { field: 'registrationTime', title: '注册时间', width: 100 } ]], mode: 'local',
        loadFilter: filter, editable: false"></select>
  </div>
  <div>
    <span>选择专业id</span>
    <select id="combogrid" style="width: 137px"></select>
  </div>
  <script type="text/javascript">
    function filter(data) {
      //不该变data.json的字段名称的情况下，以下两者任选其一
      //return data.records.rows;
      return data.records;
    }
    $(document).ready(function () {
      $("#combogrid").combogrid({
        //面板宽度
        panelWidth: 137,
        value: '选择一个值',
        //字段的id
        idField: 'specialtyId',
        //字段显示的文本
        textField: '专业id',
        //在请求远程数据的时候发送额外的参数
        queryParams: {
          type: "specialty"
        },
        //是否可以直接输入文本到字段中
        editable: false,
        //从远程站点请求数据的url
        url: '${pageContext.request.contextPath}/combobox-server',
        //数据网格的列配置对象
        columns: [[{
            field: 'specialtyName',
            title: '专业名称',
            width: 120
        }]]
      })
    })
  </script>
</body>
</html>